{strip}

{literal}
<style type="text/css">
	label.error { float: right; color: red; padding-left: .5em; vertical-align: top; }
	p { margin-bottom: 10px;clear: both; }
	em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>


<script>

jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});

jQuery.validator.addMethod("password", function( value, element ) {
		var result = this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
		if (!result) {
			element.value = "";
			var validator = this;
			setTimeout(function() {
				validator.blockFocusCleanup = true;
				element.focus();
				validator.blockFocusCleanup = false;
			}, 1);
		}
		return result;
}, "Your password must be at least 6 characters long and contain at least one number and one character.");


$(document).ready(function() {
	//$('#users_add_form').validate();
	var options = { 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    }; 
 
    $("#users_add_form").validate({
   		rules: {
		    'addForm[password]': {
		    	required: true,
		    	minlength: 6
		    },
		    'addForm[password2]': {
		      equalTo: "#password"
		    }
		    
		},
		
		onkeyup: false,
		
    	submitHandler: function(form) {
   			$(form).ajaxSubmit(options);
   		},

   		messages: {
			'addForm[password2]': {
				equalTo: "Please enter the same password as above"	
			},
			'addForm[email]': {
				email: "Please enter a valid email address, example: you@yourdomain.com",
				
			},
			'addForm[username]': {
				minlength: 6,
				remote: jQuery.validator.format("{0} is already taken, please enter a different username.")	
			}
				
		}

	});

    // bind to the form's submit event 
    
   /* $('#users_add_form').submit(function() { 
    	//fakeSubmit.UpdateEditorFormValue();
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        
    
        return false;
    });*/
    
    
});

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    //return checkForm(); 
} 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
	scroll(0,0);
	showPopup(responseText, 'Register', false);
	//window.location.reload();
}

function checkForm(){

}
</script>
{/literal}

<form id="users_add_form" method="POST" action="/index/register-save" onsubmit="">

<fieldset>
<legend>Fill the form</legend>

	<input type="hidden" name="addForm[appsId]" value="{$appsId}" />
	<!--<p>
		<label for="f0">First name</label>
		<input id="f0" type="text" name="addForm[firstName]" value="{if $formData}{$formData.firstName}{/if}" class="required" minlength="3"/><em>*</em>
	</p>
	
	<p>
		<label for="f1">Last name</label>
		<input id="f1" type="text" name="addForm[lastName]" value="{if $formData}{$formData.lastName}{/if}"   class="required" minlength="3"/><em>*</em>
	</p>
	-->
	<p>
		<label for="f2">E-Mail</label>
		<input id="f2" type="text" name="addForm[email]" value="{if $formData}{$formData.email}{/if}"   class="required email" minlength="3"/><em>*</em>
	</p>
	
	<p>
		<label for="f3">Username</label>
		<input id="f3" type="text" name="addForm[username]" remote="/index/validate-username" value="{if $formData}{$formData.username}{/if}"  class="required" minlength="6"/><em>*</em>
	</p>
	
	<p>
		<label for="password">Password</label>
		<input id="password" type="password" name="addForm[password]" value="{if $formData}{$formData.password}{/if}"  class="required password"/><em>*</em>
	</p>
	
	<p>
		<label for="password2">Password (confirm)</label>
		<input id="password2" type="password" name="addForm[password2]" value="{if $formData}{$formData.password2}{/if}"   /><em>*</em>
	</p>
	
	<p>
		<input type="hidden" name="captchaId" value="{$captchaId}" />
		<p style="font-size: 6pt; text-align: center;">{$captcha}</p>
	</p>
	<p>
		<label for="f6">Rewrite word from the image</label>
		<input id="f6" type="text" name="addForm[captchaText]" value=""  {if $message}style="border: 1px solid red;"{/if}/>{if $message}<i style="color: red;">{$message}</i>{/if}
	</p>
	
	<div class="v_spacer"> </div>
	<div>
		<div class="left">
			<input type="button" value="Resign" class="submit" onclick="closePopup();"/>
		</div>
		<div class="right">
			<input type="submit" value="Submit" class="submit"/>
		</div>
	</div>

	
</fieldset>
</form>
{/strip}